<html>
<head>
    <meta charset="utf-8"/>
    <title>吴氏族谱树</title>
    <!--<script type="text/javascript" src="/webjars/d3js/3.5.17/d3.js"/>-->
    <!--<script type="text/javascript" src="/webjars/echarts/4.1.0/echarts.js"/>-->
    <script src="/webjars/jquery/2.2.4/jquery.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%">

</div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    myChart.showLoading();
    $.get('http://localhost:8080/wf/getDto', function (data) {
        myChart.hideLoading();
        myChart.setOption(option = {
            title:{
                text:'良村吴氏族谱树'
            },
            toolbox:{
                show:true,
                feature: {
                    saveAsImage:{
                        show:true
                    },
                    restore:{
                        show:true
                    },
                    dataView:{
                        show:true
                    },
                    dataZoom:{
                        show:true
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
                    data: [data],
                    left: '2%',
                    right: '2%',
                    top: '8%',
                    bottom: '10%',
                    symbol: 'emptyCircle',
                    orient: 'vertical',
                    expandAndCollapse: true,
                    roam:true,
                    initialTreeDepth:-1,
                    label: {
                        normal: {
                            position: 'top',
                            rotate: 0,
                            verticalAlign: 'middle',
                            align: 'center',
                            fontSize: 12,
                        }
                    },
                    leaves: {
                        label: {
                            normal: {
                                position: 'top',
                                rotate: 0,
                                verticalAlign: 'middle',
                                align: 'center'
                            }
                        }
                    },
                    lineStyle:{
                        width:1,
                        curveness:1
                    },
                    animationDurationUpdate: 750
                }
            ]
        });
    });
</script>
</body>
</html>